<template>
<div class = 'Iam'>
    <h1>{{msg}}</h1>
<h2 class='name'>我的名字是{{myName}}</h2>
<h2 >我的年龄是{{age+1}}</h2>
</div>
</template>

<script>
export default {
    name:'School',
    data(){
        return {
        //    要外部传进来的数据就不要写到你的data里面了，不用传起来的你就自己写吧
        msg:'我是一个学生',
        //   假如你想改prop传进来的值，你只能另辟蹊径，你这里再创一个元素,你把元素接收了，以后改这个得了
    myName:this.name
        
        }
    },
    // 这里用prop接收外部来的数据，有三种写法

    // 简单接收
    // props:['name','age']

    // 指定接收的数据类型，接收的类型对不上会报错
    // props:{
    //     name:String,
    //     age:Number
    // }


    // 下面是更多操作的接收
    props:{
        name:{
            // 类型
            type:String,
            // 必须吗
            required:true
        },
        age:{
            type:Number,
            // 默认值
            default:23
        }
    }
}
</script>


<style>
    .name{
        background: lightblue;
    }
    .Iam{
        background: orange;
        margin-bottom:20px;
    }
</style>